<template>
<div>
<div class="seek">
<!-- 搜索 -->
<input type="text" class="seek-text" placeholder="输入城市名或拼音" v-model="seekVal"/>
</div>
<div class="seek-list" v-show="seekVal !== '' ">
  <ul>
    <li class="border-bottom" v-for="item of seekList" :key="item.id" @click="currcityclick(item.name)">
    {{ item.name }}
    </li>
    <li v-if="seekList == '' ? true :false">没有找到数据 </li>
  </ul>
</div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySeek',
  props: {
    list: Object
  },
  methods: {
    currcityclick (city) {
      this.$store.dispatch('changeCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrappers = document.querySelector('.seek-list ')
    this.scroll = new BScroll(wrappers, {
      tap: true,
      click: true
    })
  },
  data () {
    return {
      seekVal: '',
      seekList: []
    }
  },
  watch: {
    seekVal () {
      let result = [] // 保存搜索结果
      for (let key in this.list) {
        this.list[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.seekVal) !== -1 || obj.name.indexOf(this.seekVal) !== -1) { // 如果该对象的spell属性包含seekVal,证明该对象是搜索结果中的一项， 将该项保存到数组中
            result.push(obj)
            // console.log(this.seekVal)
          }
        })
      }
      this.seekList = result
    }
  }
}
</script>
<style lang="stylus" scoped="scoped">
  .seek
   background #00BCD4
   text-align center
   flex 1
   line-height 0.9rem
   color #CACACA
   .seek-text
    width 7.6rem
    height 0.6rem
    border-radius 0.06rem
    text-indent 0.2rem
    text-align center
  .seek-list
   position absolute
   top 1.78rem
   right 0rem
   left 0rem
   bottom 0rem
   background #EEEEEE
   z-index 1
   li
    background #FFFFFF
    line-height 0.6rem
    color #666666
    padding-left 0.2rem
</style>
